import { updateTophubState } from '@/services/api/api-tophub-operate';
import { CheckCircleOutlined } from '@ant-design/icons';
import {
  ActionType,
  DrawerForm,
  ModalForm,
  ProFormInstance,
  ProFormTextArea
} from '@ant-design/pro-components';
import { useAccess } from '@umijs/max';
import { Button, Typography } from 'antd';
import FormItem from 'antd/es/form/FormItem';
import React, { useRef, useState } from 'react';
import UploadDragger from '../components/UploadDragger';
interface DetailsOperateEditProps {
  data: TophubOperateData.OperateSelect;
  onOpenChange: (visible: boolean) => void;
  onRefurbish: () => void;
}

const DetailsOperateEdit: React.FC<DetailsOperateEditProps> = ({
  data,
  onOpenChange,
  onRefurbish,
}) => {
  const access = useAccess();

  const actionRef = useRef<ActionType>();

  const formRef = useRef<ProFormInstance>();

  const [open, setOpenState] = useState(false);

  return (
    <DrawerForm
      title="编辑"
      trigger={
        <Button
          key="button_record_state_edit"
          icon={<CheckCircleOutlined />}
          type="primary"
          onClick={() => {}}
        >
          编辑
        </Button>
      }
      drawerProps={{
        maskClosable: false,
        destroyOnClose: true,
        width: 650,
      }}
      open={open}
      formRef={formRef}
      onOpenChange={async (visible) => {}}
      initialValues={{
        remarks: data?.remarks,
        attachments: data?.attachments?.map((item) => {
          return {
            uid: item.id,
            name: item.name,
            url: item.content,
            mimeType: item.mimeType,
            status: 'done',
          };
        }),
      }}
      onValuesChange={(values) => {}}
      submitter={{
        render(props, dom) {
          return [
            <ModalForm
              key={'modal_form_record_state_release'}
              title={
                <>
                  <CheckCircleOutlined
                    style={{
                      marginRight: 8,
                      color: '#108ee9',
                    }}
                  />
                  提交
                </>
              }
              trigger={
                <Button
                  key="button_record_state_release"
                  icon={<CheckCircleOutlined />}
                  type="primary"
                >
                  再次提交
                </Button>
              }
              autoFocusFirstInput
              modalProps={{
                width: 400,
                // bodyStyle: { textAlign: 'center' },
                destroyOnClose: true,
                onCancel: () => console.log('run'),
              }}
              submitTimeout={2000}
              submitter={{
                submitButtonProps: {
                  type: 'primary',
                },
              }}
              onFinish={async (values) => {
                const formValues = formRef.current?.getFieldsValue();

                console.log('====', values, formValues);

                const attachments = formValues?.attachments
                  ?.filter((item) => item.status == 'done')
                  .map((item) => {
                    if (item.response) {
                      return { id: item.response.data.id };
                    } else {
                      return { id: item.uid };
                    }
                  });

                const response = await updateTophubState({
                  id: data.id,
                  state: 1, //提交
                  ...values,
                  remarks: formValues.remarks,
                  attachments: attachments,
                });

                if (response.code == 0) {
                  onRefurbish();
                  setOpenState(false);
                  return true;
                }
              }}
            >
              <Typography.Paragraph>
                <blockquote>确认，以下是意见</blockquote>
              </Typography.Paragraph>
              <ProFormTextArea
                width="xl"
                name="content"
                fieldProps={{
                  rows: 6,
                  allowClear: true,
                  maxLength: 50000,
                  placeholder: '请输入确认原因（支持换行输入）',
                  showCount: true,
                }}
              />
            </ModalForm>,
          ];
        },
      }}
    >
      <>
        <ProFormTextArea
          name="remarks"
          label="备注"
          placeholder="请输入"
          fieldProps={{
            rows: 3,
          }}
        />
        <FormItem
          name="attachments"
          label={
            <span
              style={{
                marginLeft: 11,
              }}
            >
              附件
            </span>
          }
        >
          <UploadDragger
            dragger={true}
            onPreview={(file) => {}}
            access={{
              isPicture: access.热搜热榜x配置x管理员 || access.热搜热榜x配置x运营员,
              isVideo: access.热搜热榜x配置x管理员 || access.热搜热榜x配置x运营员,
              isOffice: access.热搜热榜x配置x管理员 || access.热搜热榜x配置x运营员,
              isOther: access.热搜热榜x配置x管理员 || access.热搜热榜x配置x运营员,
            }}
            url="/tophub/attachment/save"
            maxCount={10}
          />
        </FormItem>
      </>
    </DrawerForm>
  );
};
export default DetailsOperateEdit;
